{% extends "base.html" %}

{% block content %}

	<h1>Category</h1>
	
	<div id="cat_list">
		<!-- use AJAX to load -->
	</div><!-- /#cat_list -->
	
	<div id="cat_form" class="form">
		<form action="/category" method="post">
			<input type="text" name="name" id="input_name"/>
			<input type="hidden" name="father" id="input_father" value="0"/>
			<input type="hidden" name="level" id="input_level" value="0"/>
			<input type="submit" name="submit" id="submit" value="Add category"/>
		</form>
	</div>
	
{% endblock %}
	
{% block script %}
<script>
	$(document).ready(function(){
		get_all_list();
		
		// Bind event
	
		// Del click
		$('#cat_list').on('click', '.control_del', function(){
			$.ajax({
				url: $(this).attr('href'),
				}).done(function ( data ) {
					if (data == "ok") get_all_list();
					else alert("Error when deleting");
			});
			return false;
		});

		// Category choice
		$('#cat_list').on('click', 'p', function(){
			$('p').removeClass('selected');
			if ($('#input_father').val() !== $(this).attr('id')) {
				$('#input_father').val($(this).attr('id'));
				$('#input_level').val(parseInt($(this).attr('level')) + 1);		
				$(this).addClass('selected');
			} else {
				$('#input_father').val(0);
				$('#input_level').val(0);		
			}
			
		});			
	});
	
	// Ajax submit
	$('#submit').click(function(){

		$.ajax({
			type: 'POST',
			url: '/category',
			data: "father=" + $('#input_father').val() + "&name=" + $('#input_name').val() + "&level=" + $('#input_level').val(),
			success: function(data) {
				get_all_list();
			}
		});
		
		return false;
	});
	
	function get_all_list() {
		$.ajax({
			url: "/category/all",
			}).done(function ( data ) {
				$('#cat_list').html(data);
				$('#input_father').val(0);
				$('#input_level').val(0);	
				$('p').removeClass('selected');
				
		});		
	}
</script>

{% endblock %}